<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">

            <a-form-item label="部门名称">
              <a-input v-model="searchParams.name"></a-input>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
            </a-form-item>

            <a-form-item v-if="isAuth('sys:dept:save')">
              <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
            </a-form-item>

            <a-form-item v-if="isAuth('sys:dept:delete')">
              <a-button type="primary" icon="delete" :disabled="selectedRowKeys.length === 0" @click="">批量删除</a-button>
            </a-form-item>

          </a-form>
        </a-card>
      </div>


      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="false" :loading="loading"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      >


        <span slot="action" slot-scope="text, record">
        <template>
          <a  v-if="isAuth('sys:dept:update')"  href="javascript:;" @click="handleUpdate(record)">修改</a>
          <a-divider type="vertical"/>
          <a  v-if="isAuth('sys:dept:delete')"  href="javascript:;" @click="handleDelete(record)">删除</a>
          <a-divider type="vertical"/>
          <a href="javascript:;" @click="handleLowerLevel(record)">添加下级部门</a>
        </template>
      </span>

      </a-table>

      <a-modal  :maskClosable="false"
        :title="mdl.dialogTitleMap[mdl.dialogStatus]"
        :width="700"
        v-model="mdl.visible"
        @ok="mdl.dialogStatus === 'update' ?  updateData() : createData() "
      >

        <div class="table_style1" style="margin-bottom: 24px">
          <table class="table table-bordered  table-condensed" style="margin-bottom: 10px;background-color:#f5f5f5;">
            <tbody>
            <tr>
              <td class="width-15 active"><label class="pull-right"><font color="red">*</font>所属部门：</label></td>
              <td >
                <a-input placeholder="" disabled v-model="mdl.formData.parentName"/>
              </td>
              <td class="width-15 active"><label class="pull-right"><font color="red">*</font>所属部门ID：</label></td>
              <td >
                <a-input placeholder="" disabled v-model="mdl.formData.parentId"/>
              </td>
            </tr>
            <tr>
              <td class="width-15 active"><label class="pull-right"><font color="red">*</font>部门名称：</label></td>
              <td >
                <a-input placeholder=""  v-model="mdl.formData.name"/>
              </td>
              <td class="width-15 active"><label class="pull-right"><font color="red">*</font>部门ID：</label></td>
              <td >
                <a-input placeholder=""  disabled v-model="mdl.formData.id"/>
              </td>
            </tr>

            </tbody>
          </table>


        </div>
      </a-modal>

    </a-card>


  </div>
</template>

<script>

  import {
    queryDeptList,
    deptInsert,
    deptDelete,
    deptUpdate
  } from "@/api/system/dept"

  export default {
    components: {},
    data() {
      return {

        /*   -------搜索框--------*/
        searchParams: {
          name: ''
        },



        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加',
            lowerLevel:'添加下级机构'
          },
          visible: false,
          title: '',
          formData: {
            identifier: '',
            name: '',
            pid: 0 ,
            parentName:'根部门'
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          }
          ,
        },


        /*   -------表格--------*/
        loading: false,
        columns: [
          {
            title: '部门名称',
            dataIndex: 'name'
          },
          {
            title: '部门ID',
            dataIndex: 'id'
          },
          {
            title: '部门描述',
            dataIndex: 'description'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '200px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        data: [],
        selectedRowKeys: [], // Check here to configure the default column

      }
    },
    inject: ['upShow'],filters: {},
    created() {

    },
    mounted() {
      this.getTableData()
    },
    methods: {

      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },

      getTableData() {

        this.loading = true

        const parameter = {
          _search: false,//是否分页查询
          data: this.searchParams
        }
        queryDeptList(parameter).then(res => {
          if(res.code===200){
            this.data =   this.$util.filterRowChildren(res.data)
            this.loading = false
          }
          this.loading = false

        }).catch(err => {
          this.loading = false
          this.upShow(2)
        })
      },
      handleSearch() {
        this.getTableData()
      },

      setDefaults() {
        this.mdl.formData = {
          id: '',
          name: '',
          parentId: 0,
          parentName:'根部门'
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true

      },
      createData() {
        const parameter = this.mdl.formData
        deptInsert(parameter).then(res => {
          if (res.code === 200
          ) {
            this.upShow(1,"添加数据")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行", row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },

      updateData(row) {
        this.upShow(2,"修改数据")
        const parameter = {
          name: this.mdl.formData.name,
          id: this.mdl.formData.id,
          parentName: this.mdl.formData.parentName,
          pid: this.mdl.formData.pid,
        }
        deptUpdate(parameter).then(res => {
          if (res.code === 200 ) {
            this.upShow(2,"操作成功")
            this.mdl.visible = false
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      handleDelete(row) {
        deptDelete(row.id).then(res => {
          if (res.code === 200
          ) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
           this.upShow(2,res.msg)
          }

        }).catch(err => {
          this.upShow(2)
        })
      },

      handleLowerLevel(row) {
        this.setDefaults()
        this.mdl.formData.parentId = row.id // copy obj
        this.mdl.formData.parentName = row.name
        this.mdl.dialogStatus = 'lowerLevel'
        this.mdl.visible = true
      },


    }
  }
</script>

<style scoped>

</style>
